<template>
    <div class="mime-info-list-wrap">
        <div class="tab-wrap">
          <van-tabs type="card" @click="onClick" class="tab-nav" color="#444444">
            <van-tab title="综合"></van-tab>
            <van-tab title="热门"></van-tab>
            <van-tab title="最新"></van-tab>
          </van-tabs>
        </div>
        <div class="padding-12">
          <div class="mime-info-list mime-list-wrap">
            <van-list
              v-model="isUploading"
              :finished="isUpfinished"
              :finished-text=" mimeInfoList.length === 0 ? '暂无数据' : '没有更多了' "
              @load="onLoad"
            >
              <van-row v-for="(item,index) in mimeInfoList" :key="index" class="index-list info-list">
                <router-link :to="{path:baseUrl,query:{id:item.id}}">
                  <van-col span="16">
                    <div class="display-table">
                      <div class="display-table-cell">
                        <h4>{{item.title}}</h4>
                        <van-row>
                        <van-col span='16' class="van-ellipsis">
                            <p>发布时间：{{item.created_at}}</p>
                        </van-col>
                        <van-col span='8' class='text-align-r'>
                            <p>
                                <label class="list-icon-see info-list-icon-see"></label>
                                {{item.clicks > 9999 ? (item.clicks/10000).toFixed(1)+'万' : item.clicks}}人阅读
                            </p>
                        </van-col>
                        </van-row>
                        
                      </div>
                    </div>
                  </van-col>
                  <van-col span="7" offset="1" class="text-align-r">
                    <div class="mime-info-list-img border-radius5">
                      <img :src="CDNimgUrl + item.image">
                    </div>
                  </van-col>
                </router-link>
              </van-row>
            </van-list>
          </div>
        </div>
    </div>
</template>

<script>
    import ajax from '../../module/ajax/public'
    import { List, Row, Col, Tab, Tabs, Collapse, CollapseItem, Cell, CellGroup, Icon } from 'vant'
    export default {
      name: 'MimeInfoList',
      components: {
        [List.name]: List,
        [Row.name]: Row,
        [Col.name]: Col,
        [Tab.name]: Tab,
        [Tabs.name]: Tabs,
        [Collapse.name]: Collapse,
        [CollapseItem.name]: CollapseItem,
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup,
        [Icon.name]: Icon,
      },
      mounted(){
        this.keyword = this.$route.query.keyword ? this.$route.query.keyword : ''
        this.getDiseaseData()
      },
      data () {
        return {
          baseUrl: 'article-detail',
          CDNimgUrl: this.GLOBAL.CDNimgUrl,
          page: 0,
          tableIndex: 0,
          sortArr: ['sort', 'hits', 'id'],
          mimeInfoList: [],
          isUploading: false,
          isUpfinished: false,
          activeNames:[],
          sortListArray:['综合','热门','最新'],
          filterListArray:[],
          tab1Title:'排序',
          tab2Title:'筛选',
          filterIndex:0,
          interestObject:{},
          keyword:''
        }
      },
      methods: {
        // 获取疾病列表
        getDiseaseData () {
          ajax.doAction({
            url: '/topDisease',
            type: 'POST',
            successCallback: (data) => {
              // console.log(data)
              let datas = data.data
              datas.forEach(value => {
                this.filterListArray.push(value.label)
                this.interestObject[value.label] = value.value
              })
              // console.log(' this.interestObject',this.interestObject)
            },
            errorCallback: (data) => {
              console.log('请求失败')
            }
          })
        },
        getInfoListDaTa () {
          this.page++
          ajax.doAction({
            url: `/article?page=${this.page}&sort=${this.sortArr[this.tableIndex]}&disease=${this.filterIndex}&keyword=${this.keyword}`,
            type: 'GET',
            successCallback: (data) => {
              // console.log(data);
              let datas = data.data
              this.isUploading = false
              if (datas.length > 0) {
                this.mimeInfoList = this.mimeInfoList.concat(datas)
              } else {
                this.isUpfinished = true
              }
            },
            errorCallback: (data) => {
              console.log('请求失败')
            }
          })
        },
        onClick(index,title){
            // this.$toast(index,title);
            this.page = 0;
            this.tableIndex = index;
            this.isUploading = true;
            this.isUpfinished = false;
            this.mimeInfoList = [];
            this.getInfoListDaTa();
        },
        onLoad () {
          // console.log('上拉加载'+this.page);
          this.getInfoListDaTa()
        },
      }
    }
</script>

<style>

</style>
